<template>
  <div style="margin-top: 40px">
    <div
      v-loading.fullScreen="visible"
      v-hotkey="{
        enter: show,
        esc: hide,
        left: reduce,
        right: add,
        'command+enter': () => (visible = true),
      }"
      class="hotkey"
    >
      按 enter 键显示 dom , esc 取消显示
    </div>

    <Transition>
      <div v-if="visible" class="visible" style="color: red">Hello hotkey</div>
    </Transition>

    <div style="margin-top: 20px">按键盘左右键实现加减 {{ count }}</div>
    <p>按command+enter触发loading</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);
const count = ref(0);

function show() {
  visible.value = true;
}
function hide() {
  visible.value = false;
}

function add() {
  count.value++;
}
function reduce() {
  count.value--;
}

function show1() {
  alert("111");
}
</script>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
